<script lang="ts" setup>
import operDate from "./date.vue";
import operType from "./type.vue";

const activeKey = ref("1");

const operationDate = ref(null);
const operationType = ref(null);
const handleRefresh = () => {
  if (activeKey.value === "1" && operationDate.value) {
    operationDate.value.getList();
  }
  if (activeKey.value === "2" && operationType.value) {
    operationType.value.getList();
  }
};
</script>

<template>
  <a-card hoverable>
    <template #title>
      <a-flex align="center" justify="space-between">
        <div class="card-title">操作概览</div>
        <el-tabs v-model="activeKey" stretch>
          <el-tab-pane name="1" >
            <template #label>
              <span>
                <svg-icon icon-class="date"/>
                日期
              </span>
            </template>
          </el-tab-pane>
          <el-tab-pane name="2" >
            <template #label>
              <span>
                 <svg-icon icon-class="category"/>
                类型
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <a-flex gap="small">
          <el-tooltip content="点击刷新" placement="top">
            <el-button circle icon="refresh" plain type="primary"
                       @click="handleRefresh()"></el-button>
          </el-tooltip>
        </a-flex>
      </a-flex>
    </template>
    <oper-date v-if="activeKey==='1'" ref="operationDate" />
    <oper-type v-if="activeKey==='2'" ref="operationType" />
  </a-card>
</template>

<style lang="scss" scoped>

</style>
